<template>
	<div class="single-result-show-area">
		<ve-wordcloud :data="wordChartData" :settings="wordChartSettings" :extend="wordChartExtend" ref="wordChart"></ve-wordcloud>
	</div>
</template>

<script>
export default {

	props: {
		showData: { type: Object 	}
	},

	watch: {
		showData: function (newValue, oldValue) {
			if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
				this.renderChart();
			}
		}
	},

	data: function () {
		return {
			wordChartData: {}, 

			wordChartSettings: {
				sizeMin: 12,
        sizeMax: 60
			},

			wordChartExtend: {
        series: {
          // 词云图参数配置 参考 https://github.com/ecomfe/echarts-wordcloud
          rotationRange: [0, 0],
          width: "100%",
          height: "100%",
        },
      }

		}
	},

	methods: {

		// 渲染图形
		renderChart: function () {
			var data = { columns: ["word", "count"], rows: []};
			data.rows = this.showData.frequencySet;
			this.wordChartData = data;
			this.$refs[`wordChart`].echarts.resize();
		}
	}
}
</script>

<style lang="less" scoped>
.single-result-show-area {
	width: 100%;
	height: calc(~'100% - 60px');
	padding-top: 30px;
	padding-bottom: 30px;
}
</style>
